<template>
  <div>
    <nav class="menu-container">
      <RouterLink v-for="item in items" :key="item.link" :to="{ name: item.name }" active-class="selected" ref="routerLinkDom">
        <div class="icon">
          <Icon :type="item.icon" />
        </div>
        <span>{{ item.title }}</span>
      </RouterLink>
    </nav>
  </div>
</template>

<script setup>
import { ref, nextTick, watch } from 'vue'
import { useRouter } from 'vue-router'
const items = ref([
  {
    name: 'Home',
    title: '首页',
    icon: 'home',
    exact: true
  },
  {
    name: 'Blog',
    title: '文章',
    icon: 'blog',
    exact: false // 激活状态是否要精确匹配
  },
  {
    name: 'About',
    title: '关于我',
    icon: 'about',
    exact: true
  },
  {
    name: 'Project',
    title: '项目&效果',
    icon: 'code',
    exact: true
  },
  {
    name: 'Message',
    title: '留言板',
    icon: 'chat',
    exact: true
  }
])

const router = useRouter()
const routerLinkDom = ref(null)
let activeDom = ref([])
// 监听当前路由
watch(
  () => router.currentRoute.value,
  async (newValue) => {
    await nextTick()

    if (routerLinkDom.value) {
      activeDom.value = routerLinkDom.value.filter((item) => item.to.name == 'Blog')
    }
    if (newValue.fullPath.includes('/Oarticle')) {
      activeDom.value[0].$el.classList.add('selected')
    } else {
      if (activeDom.value[0]) {
        activeDom.value[0].$el.classList.remove('selected')
      }
    }
  },
  { immediate: true }
)
</script>

<style scoped lang="scss">
@import '@/styles/var.scss';

.menu-container {
  color: $gray;
  margin: 24px 0;

  a {
    &.selected {
      background: darken($words, 3%);
      color: #fff;
    }

    &.active {
      // background: darken($words, 3%);
      color: #fff;
    }

    &.exActive {
      background: darken($words, 3%);
      color: #fff;
    }

    padding: 0 50px;
    display: block;
    display: flex;
    align-items: center;
    height: 45px;
    color: $gray;

    .icon {
      width: 24px;
    }

    &:hover {
      color: #fff;
    }
  }
}
</style>
